<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/9/29
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
  table,th,td{
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
  }
</style>
<body>
<input type="button" id="btn"  name="btn" value="查询" >
<table width="100%" border="1px" id="zhu">
  <tr>
    <td>编号</td>
    <td>姓名</td>
    <td>别名</td>
    <td>科属</td>
    <td>价格</td>
    <td>原产地</td>
  </tr>
</table>
<h2> 新增学生</h2>
<div>
  <form action="/a?opr=add" method="post">
    <table>
      <tr>
        <td>姓名</td>
        <td><input type="text" name="name"></td>
      </tr>
      <tr>
        <td>别名</td>
        <td><input type="text" name="anothername"></td>
      </tr>
      <tr>
        <td>科属</td>
        <td><input type="text" name="property"></td>
      </tr>
      <tr>
        <td>价格</td>
        <td><input type="text" name="price"></td>
      </tr>
      <tr>
        <td>原产地</td>
        <td><input type="text" name="production"></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="提交" id="add">
          <input type="reset" value="重置">
        </td>
      </tr>
    </table>
  </form>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
  $("#btn").click(function (){
    $.ajax({
      url : "/a",
      type : "post",
      dataType : "json",
      success : function (data){
        console.log(data);
        for (var i = 0; i < data.length; i++) {
          var $tr="<tr><td width='10%'>"+data[i].id+"</td><td width='20%'>"+data[i].name+"</td><td width='15%'>"+data[i].anothername+"</td><td width='15%'>"+data[i].property+"</td><td width='15%'>"+data[i].price+"</td><td width='25%'>"+data[i].production+"</td></tr>"
          $("#zhu").append($tr);
        }
      }
    })
  })
</script>
</body>
</html>
